<template>
    <div class="service-main-content">
        <div class="service-container" style="display: flex;">
            <div class="service-left">
                <span>2021/10/09 10:09:09</span>
                <el-tag effect="dark" type="danger" round>待服务</el-tag>
            </div>
            <div class="service-right">
                <div class="service-msg-container">
                    <div class="header">
                        <span>服务信息</span>
                        <el-button type="primary" link>编辑</el-button>
                    </div>
                    <div class="service-content">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <span>服务编号</span>
                                111
                            </el-col>
                            <el-col :span="8">
                                <span>服务状态</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务机构</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <span>服务团队</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务医生</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务包</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <span>服务项目</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务地点</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务来源</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <span>提交时间</span>
                            </el-col>
                            <el-col :span="8">
                                <span>审核时间</span>
                            </el-col>
                            <el-col :span="8">
                                <span>审核人</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <span>服务时间</span>
                            </el-col>
                            <el-col :span="8">
                                <span>服务备注</span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <el-button type="primary">添加服务</el-button>
    <el-button @click="$router.back()">返回</el-button>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.el-row:not(:last-child){
    margin-bottom: 30px;
}
.service-main-content{
    margin-bottom: 20px;
}
.el-button{
    height: 40px;
}

.service-left {
    height: 100px;
    width: 200px;
    border-right: 1px solid #f2f2f2;
}

.service-msg-container {
    padding: 20px;
    margin-left: 20px;
    font-size: 13px;
    color: #333;
    width: 860px;
    background-color: #F2F7FB;
}

.service-content{
    span{
        color: #999;
        margin-right: 10px;
    }
}
.header {
    margin-bottom: 20px;

    span {
        font-size: 16px;
        font-weight: 500;
        margin-right: 5px;
    }
}
</style>